@charset "utf-8";
*{
	margin: 0%;
	padding: 0%;
	font-family: "华文彩云";
	font-size: 80px;
}
body{
	background-image: url(../Day02/img/海底.jpg);
	background-size: 100% 116%;
	background-repeat: no-repeat;
}
.kaido{
	width: 300px;
	height: 300px;
	bor der: 1px solid red;
	background: url(../Day02/img/凯多.png);
	background-size: 100% 100%;
	position: relative;
	top: -60;
	left: -1;
	animation: kaido 3s linear infinite;
}
@keyframes kaido{
	0%{ /*初始化*/
		    top: -60px;
		    left: -1px;
			
	    }
	    10%{
			top:20 ;
			left: 80px;
			background: url(../Day02/img/凯多.png);
			/*背景尺寸：背景空间与实际图片不符*/
			background-size: 100% 100%;
			
		}
		20%{
			top: 40px;
			left: 138px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		30%{
			top: 70px;
			left: 200px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		40%{
			top: 100px;
			left: 290px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		50%{
			top: 190px;
			left: 510px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		60%{
			top: 100px;
			left: 290px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		70%{
			top: 70px;
			left: 200px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		80%{
			top: 40px;
			left: 138px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		90%{
			top: 20px;
			left: 80px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}
		100%{
			top:-60 px;
			left: 1px;
			background: url(../Day02/img/凯多.png);
			background-size: 100% 100%;
			
		}

}

   .luffy{
	width: 200px;
	height: 300px;
	bor der: 1px solid red;
	background: url(../Day02/img/路飞.png);
	background-size: 100% 100%;
	position: relative;
	top: 270;
	left: 1;
	animation:  luffy 1s linear infinite;
}
@keyframes luffy{
	0%{ /*初始化*/
		    top: 270px;
		    left: 1px;
			
	    }
	    10%{
			top:162px;
			left: 180px;
			background: url(../Day02/img/路飞.png);
			/*背景尺寸：背景空间与实际图片不符*/
			background-size: 100% 100%;
			
		}
		20%{
			top: 120px;
			left: 327px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
			}
		30%{
			top: 140px;
			left: 350px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
			
		}
		40%{
			top: 120px;
			left: 420px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
			
		}
		50%{
			top: 100px;
			left: 480px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
		}
		60%{
			top: 120px;
			left: 420px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
		}
		70%{
			top: 140px;
			left: 350px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
		}
		80%{
			top: 120px;
			left: 327px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
		}
		90%{
			top: 162px;
			left: 180px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
		}
		100%{
			top: 270px;
			left: 1px;
			background: url(../Day02/img/路飞.png);
			background-size: 100% 100%;
		}
		}
		.zoro{
			width: 200px;
			height: 300px;
			bor der: 1px solid red;
			background: url(../Day02/img/索隆.png);
			background-size: 100% 100%;
			position: relative;
			top: -60;
			left: 1100;
			animation:  zoro 3s linear infinite;
		}
		
		@keyframes zoro {
			0%{ /*初始化*/
				    top: -60px;
				    left: 1100px;
			    }
			    10%{
					top: -135;
					left: 1000px;
					background: url(../Day02/img/索隆.png);
					/*背景尺寸：背景空间与实际图片不符*/
					background-size: 100% 100%;
				}
				20%{
					top: -170px;
					left: 920px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				30%{
					top: -206px;
					left: 835px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				40%{
					top: -226px;
					left: 765px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				50%{
					top: -285px;
					left: 695px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				60%{
					top: -226px;
					left: 765px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				70%{
					top: -206px;
					left: 835px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				80%{
					top: -170px;
					left: 920px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				90%{
					top: -135px;
					left: 1000px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
				100%{
					top: -60px;
					left: 1100px;
					background: url(../Day02/img/索隆.png);
					background-size: 100% 100%;
				}
		 }
		
		.blackbeard{
			width: 200px;
			height: 300px;
			bor der: 1px solid red;
			background: url(../Day02/img/黑胡子.png);
			background-size: 100% 100%;
			position: relative;
			top: -955;
			left: 1000;
			animation:  blackbeard 1s linear infinite;
		}
		
		@keyframes blackbeard {
			0%{ /*初始化*/
				    top: -955px;
				    left: 1000px;
			    }
			    10%{
					top: -890;
					left: 894px;
					background: url(../Day02/img/黑胡子.png);
					/*背景尺寸：背景空间与实际图片不符*/
					background-size: 100% 100%;
					
				}
				20%{
					top: -840px;
					left: 840px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				30%{
					top: -800px;
					left: 760px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				40%{
					top: -755px;
					left: 680px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				50%{
					top: -570px;
					left: 604px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				60%{
					top: -755px;
					left: 680px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				70%{
					top: -800px;
					left: 760px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				80%{
					top: -840px;
					left: 840px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				90%{
					top: -890px;
					left: 894px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
				100%{
					top: -955px;
					left: 1000px;
					background: url(../Day02/img/黑胡子.png);
					background-size: 100% 100%;
					
				}
		 
		
		
		
 




